<template>
  <div id="StudentInf">
    <a-form layout="inline" style="margin-bottom: 8px">
      <a-form-item label="关键字" class="searchItem">
        <a-input placeholder="请输入" />
      </a-form-item>
      <a-form-item label="">
        <a-button type="primary" @click="getData"> 查询 </a-button>
      </a-form-item>
      <a-form-item label="">
        <a-button type="primary" @click="addbtn" v-if="role==3">新增</a-button>
        <a-upload
          class="upload"
          name="file"
          :multiple="true"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <a-button type="primary" style="margin-left: 8px">导入</a-button>
        </a-upload>
        <a-button type="primary" style="margin-left: 10px">导出</a-button>
      </a-form-item>
    </a-form>

    <a-table
      :scroll="{ y: 500 }"
      bordered
      :columns="columns"
      style="margin-top: 30px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => index"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button v-if="role == 3" type="primary" @click="editClick(record)"
          >修改信息</a-button
        >
        <a-button
          v-if="role == 3"
          type="danger"
          style="margin-left: 10px"
          @click="deleteClick(record)"
          >删除</a-button
        >
      </template>
    </a-table>
    <a-modal v-model="visible" :title="title">
      <a-form-model
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="姓名" prop="realName">
          <a-input v-model="form.realName" />
        </a-form-model-item>
        <a-form-model-item label="性别" prop="sex">
          <a-select v-model="form.sex">
            <a-select-option
              v-for="item in sexList"
              :key="item.id"
              :value="item.id"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户权限" prop="role">
          <a-select v-model="form.role">
            <a-select-option
              v-for="item in roleList"
              :key="item.id"
              :value="item.id"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属班级" prop="studentClass">
          <a-input v-model="form.studentClass" />
        </a-form-model-item>
        <a-form-model-item label="所属届" prop="year">
          <a-input v-model="form.year" />
        </a-form-model-item>
        <a-form-model-item label="账号" prop="userName">
          <a-input v-model="form.userName" :disabled="isDisabled" />
        </a-form-model-item>
        <a-form-model-item label="密码" prop="password">
          <a-input v-model="form.password" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    role: {},
  },
  data() {
    return {
      isDisabled: true,
      sexList: [
        {
          id: 1,
          label: "男",
        },
        {
          id: 2,
          label: "女",
        },
      ],
      roleList: [
        {
          id: 1,
          label: "用户",
        },
        {
          id: 3,
          label: "管理员",
        },
      ],
      form: {
        realName: "", //姓名
        sex: "", //性别
        role: "", //用户权限
        studentClass: "", //所属班级
        year: "", //所属届
        userName: "", //账号
        password: "", //密码
      },
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        studentClass: [
          { required: true, message: "请输入所属班级", trigger: "blur" },
        ],
        year: [{ required: true, message: "请输入所属届", trigger: "blur" }],
        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      visible: false,
      title: null,
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "key",
          scopedSlots: { customRender: "key" },
        },
        {
          title: "姓名",
          dataIndex: "realName",
          customRender: (text, record) => {
            return record.realName ? record.realName : "—";
          },
        },
        {
          title: "性别",
          dataIndex: "sex",
          customRender: (text, record) => {
            if (!record.sex) {
              return "-";
            } else {
              if (record.sex == 1) {
                return "男";
              } else if (record.sex == 2) {
                return "女";
              }
            }
          },
        },
        {
          title: "所属班级",
          dataIndex: "studentClass",
          customRender: (text, record) => {
            return record.studentClass ? record.studentClass : "—";
          },
        },
        {
          title: "所属届",
          dataIndex: "year",
          customRender: (text, record) => {
            return record.year ? record.year : "—";
          },
        },
        // {
        //   title: "账号",
        //   dataIndex: "userName",
        //   customRender: (text, record) => {
        //     return record.userName ? record.userName : "—";
        //   },
        // },
        // {
        //   title: "密码",
        //   dataIndex: "password",
        //   customRender: (text, record) => {
        //     return record.password ? record.password : "—";
        //   },
        // },
        {
          title: "操作",
          width: 200,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        size: "10",
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  watch: {
    visible: {
      handler(newVal) {
        if (!newVal) {
          this.$refs.formRef.resetFields && this.$refs.formRef.resetFields(); //重置表单校验
          this.form = {
            realName: "", //姓名
            sex: "", //性别
            studentClass: "", //所属班级
            year: "", //所属届
            userName: "", //账号
            password: "", //密码
          };
        }
      },
    },
  },
  created() {
    this.getData();
  },
  methods: {
    deleteClick(row) {
      //点击删除
      let params = {
        ids: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios.delete("/sys/user", { params }).then((res) => {
            that.$message.success("删除成功");
            that.getData();
          });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
    editClick(row) {
      //编辑
      this.isDisabled = true;
      for (let i in row) {
        if (i in this.form && i != "time") {
          this.form[i] = row[i];
        }
      }
      this.form.id = row.id;
      this.title = "编辑";
      this.visible = true;
    },
    addbtn() {
      //新增
      this.isDisabled = false;
      this.title = "新增学员信息";
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            let data = this.form;
            if (this.title == "新增学员信息") {
              this.$axios.post("/sys/user", data).then((res) => {
                this.$message.success("新增成功");
                this.getData();
                this.visible = false; // 关闭模态框
              });
            } else if (this.title == "编辑") {
              this.$axios.put("/sys/user", data).then((res) => {
                this.$message.success("编辑成功");
                this.getData();
                this.visible = false; // 关闭模态框
              });
            }
          } else {
            console.log("校验失败");
          }
        });
      });
    },
    async getData() {
      if (this.role == 3) {
        //管理员权限查询所有
        let data = await this.$axios.get("/sys/user/page");
        data.response.forEach((item, index) => {
          item.key = index + 1;
        });
        this.tableData = data.response;
        this.tablePagination.total = data.response.length;
      } else if (this.role == 1) {
        //学员权限查询当前的信息
        let data = await this.$axios.get("/sys/user/current");
        data.response.key=1;
        this.tableData = [data.response];
        this.tablePagination.total = 1;
      }
    },
  },
};
</script>

<style lang="scss">
#StudentInf {
  .upload {
    position: relative;
    .ant-upload-list {
      position: absolute;
      .ant-upload-list-item {
        width: 200px;
      }
    }
  }
}
</style>